<template>
  <nav class="navbar navbar-light">
    <div class="container">
      <nuxt-link class="navbar-brand"
                 to="/">
        conduit
      </nuxt-link>
      <ul class="nav navbar-nav pull-xs-right">
        <!-- 登录状态 -->
        <template v-if="user">
          <li class="nav-item">
            <nuxt-link class="nav-link"
                       to="/"
                       exact>
              Home
            </nuxt-link>
          </li>
          <li class="nav-item">
            <nuxt-link class="nav-link"
                       exact
                       to="/editor">
              <i class="ion-compose"></i>&nbsp;New Post
            </nuxt-link>
          </li>
          <li class="nav-item">
            <nuxt-link class="nav-link"
                       to="/settings">
              <i class="ion-gear-a"></i>&nbsp;Settings
            </nuxt-link>
          </li>
          <li class="nav-item">
            <nuxt-link class="nav-link ng-binding active"
                       to="/profile/vimin">
              <img class="user-pic"
                   :src="user.image">
              {{ user.username }}
            </nuxt-link>
          </li>
        </template>

        <!-- 非登录状态 -->
        <template v-else>
          <li class="nav-item">
            <nuxt-link class="nav-link"
                       to="/"
                       exact>
              Home
            </nuxt-link>
          </li>
          <li class="nav-item">
            <nuxt-link class="nav-link"
                       to="/login">Sign in</nuxt-link>
          </li>
          <li class="nav-item">
            <nuxt-link class="nav-link"
                       to="/register">Sign up</nuxt-link>
          </li>
        </template>

      </ul>
    </div>
  </nav>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'RwHeader',
  computed: {
    ...mapState(['user'])
  }
}
</script>

<style>
</style>